<template>
	<view scroll-y class="address-list-wrapper">
		<custom-header-bar title="地址管理" bg="1" backStatus="1"></custom-header-bar>
		<div class="content-box">
			<u-loading-icon v-if="addressList===''" status="loading" size="40" height="100" :icon="true" textSize="30"
				text="正在加载..." />
			<u-empty class="empty" v-else-if="addressList.length===0" text="暂无收货地址" mode="address"></u-empty>
			<view class="list-wrapper" v-else>
				<view class="item-wrapper" v-for="(item, index) in addressList" :key="index">
					<image class="position-image" src="/static/point.png" mode="aspectFit"></image>
					<div class="info-wrapper" @click.stop="jumpjiading(item)">
						<view class="basic">
							<div class="region">
								<span v-if="item.addressOneStr">{{item.addressOneStr}}</span>
								<span v-if="item.addressTwoStr">{{item.addressTwoStr}}</span>
								<span v-if="item.addressThreeStr">{{item.addressThreeStr}}</span>
								<span v-if="item.addressFourStr">{{item.addressFourStr}}</span>
								<span>{{ item.addressDetail }}</span>
							</div>
							<div class="person">
								<text>{{ item.name }}</text>
								<text>{{ item.mobile }}</text>
							</div>
						</view>
						<view class="operate-wrapper">
							<view class="relative">
								<text class="button del" @click.stop="addAddress(item.id)">编辑</text>
								<text class="button edit" @click.stop="removeAddress(item.id)">删除</text>
							</view>
						</view>
					</div>
				</view>
				<view style="height: 100px"></view>
			</view>
		</div>
		<div class="add-button">
			<button type="default" class="button" @click="addAddress('')">
				<u-icon name="plus" size="32" color="#ffffff"></u-icon>
				新增地址
			</button>
		</div>
		<u-popup round="18" :show="delshow" mode="center">
			<view class="popup-model-wrapper">
				<div class="title">
					<image class="image" src="/static/icon-warning-orange.png"></image>
					<div class="text">删除提示</div>
				</div>
				<div class="content">确定要删除该地址吗？</div>
				<div class="operate-wrapper">
					<button class="button del" @click="delshow=false">取消</button>
					<button class="button confirm" @click="popupConfirm">确定</button>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue"
	import * as API_Address from "@/api/address.js";
	export default {
		components: {
			CustomHeaderBar
		},
		data() {
			return {
				addressList: '', //地址列表
				delshow: false, //是否显示下栏框
				removeList: [{
					name: "确定",
				}, ],
				tips: "确定要删除该收货人信息吗？",
				removeId: "", //删除的地址id
				routerVal: "",
				params: {
					pageNumber: 1,
					pageSize: 1000,
				},
				id: '',
				daysss: '',
				shiduansss: '',
				type: ''
			};
		},
		onLoad: function(val) {
			this.type = val.type
		},
		onPullDownRefresh() {
			//下拉刷新
			this.addressList = [];
			this.getAddressList();
		},
		/**
		 * 进入页面检测当前账户是否登录
		 */
		onShow() {
			let that = this;
			this.getAddressList();
		},
		methods: {
			//获取地址列表
			getAddressList() {
				API_Address.getAddressList().then((res) => {
					this.addressList = res.data.data.rows;
				});
			},
			//删除地址
			removeAddress(id) {
				this.removeId = id;
				this.delshow = true
			},
			// 删除地址
			popupConfirm() {
				this.delshow = false
				API_Address.deleteAddress(this.removeId).then((res) => {
					if (res.statusCode == 200) {
						uni.showToast({
							icon: "none",
							title: "删除成功",
						});
						this.getAddressList();
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.message,
							duration: 2000,
						});
					}
				});
			},
			//新建。编辑地址
			addAddress(id) {
				uni.navigateTo({
					url: `/pages/address/add${id ? "?id=" + id : ""}`,
				});
			},
			// 跳转家政订单
			jumpjiading(row) {
				if (this.type === 'order') {
					uni.setStorageSync('AddressOnce', {
						...row
					})
					uni.navigateBack({

					})
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "./address.scss";

	.address-list-wrapper {
		min-height: 100vh;
		padding: 160upx 0 140upx 0;
		box-sizing: border-box;
		background-color: #F4f4f4;

		.content-box {
			padding: 24upx;

			.empty {
				margin-top: 200rpx !important;
			}

			.list-wrapper {
				.item-wrapper {
					display: flex;
					margin-bottom: 24rpx;
					padding: 24upx;
					color: #666;
					background-color: #ffffff;
					border-radius: 30upx;

					.position-image {
						width: 96upx;
						height: 96upx;
					}

					.info-wrapper {
						padding-left: 16upx;
						flex: 1;

						.basic {
							color: #484848FF;
							line-height: 48upx;
						}

						.person {
							margin-top: 12upx;
							color: #00000073;
							font-size: 30upx;
						}

						.operate-wrapper {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 80rpx;
							padding: 0 30rpx;
							margin-top: 24upx;

							.unchecked {
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								border: 1px solid #e0e0e0;
								display: inline-block;
								vertical-align: middle;
								margin-right: 8rpx;
								position: relative;
								top: -2rpx;
								left: 0;
							}

							.relative {
								display: flex;

								.button {
									width: 180upx;
									height: 68upx;
									line-height: 68upx;
									text-align: center;
									font-size: 28upx;
									border-radius: 10upx;
									margin-left: 24upx;
								}

								.del {
									border: 1px solid #DC3338;
									color: #DC3338;
								}

								.edit {
									border: 1px solid #33CCACFF;
									color: #33CCACFF;
								}
							}
						}
					}
				}
			}
		}

		.add-button {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0rpx;
			height: 140rpx;
			left: 0rpx;
			right: 0;
			background-color: #ffffff;

			.u-icon {
				margin-right: 16rpx;
			}

			.button {
				height: 80upx;
				line-height: 80upx;
				width: 700upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #80D7CE;
				border-radius: 10upx;
				color: #ffffff;
			}
		}

		.popup-model-wrapper {
			width: 420upx;
			border-radius: 30upx;
			padding: 40upx;
			box-sizing: border-box;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					margin-right: 24upx;
					width: 52upx;
					height: 52upx;
				}

				.text {
					font-size: 34upx;
					color: #000000CC;
				}
			}

			.content {
				margin-top: 50upx;
				text-align: center;
				color: #666666FF;
				font-size: 26upx;
			}

			.operate-wrapper {
				margin-top: 56upx;
				display: flex;
				justify-content: space-around;

				.button {
					width: 150upx;
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					border-radius: 4upx
				}

				.del {
					background: #EBEDF0FF;
					color: #BFBEBEFF;
				}

				.confirm {
					background: #61D7CAFF;
					color: #FFFFFFFF;
				}
			}
		}
	}
</style>
